<template>
    <view class="container paddingBottomBar">
        <header-bar :config="config"></header-bar>
        <view class="top_bg"></view>
        <view class="order-main">
            <view class="consumer-top">
                <view @click="openWarehouseDrawer()">
                    <view class="flex-v-c">仓库</view>
                    <view class="flex-main" :class="{ color3: !warehouse }"
                        ><text class="text-show-line-1">{{ warehouse ? warehouse : "请选择仓库"
                        }}</text>
						<uni-icons type="arrowright" style="margin-top: 4rpx;" size="24" customIcons="icon-black"></uni-icons
                    ></view>
                </view>
				<view>
				    <view class="flex-v-c">商品</view>
				    <view @click="selectRegion" style="font-size:24rpx" :class="{ color3: classifyList.length==0 }"
				        >{{ classifyList.length>0 ? '去修改' : "请选择分类"
				        }}<uni-icons type="arrowright" size="24" customIcons="icon-black"></uni-icons
				    ></view>
				</view>
				<view @click="openProductDrawer()">
				    <view class="flex-v-c"></view>
				    <view style="font-size:24rpx" :class="{ color3: !product }"
				        >{{ product ? product : "请选择商品"
				        }}<uni-icons type="arrowright" size="24" customIcons="icon-black"></uni-icons
				    ></view>
				</view>
				<view class="productMain" v-if="classifyList.length >0">
					<view class="productMain-title">已选类别({{classifyList.length}})</view>
					<view v-for="item in classifyList" class="flex-s-c">
				        <view>
				            <view class="text-show-line-2">{{item.name}}</view>
				        </view>
				        <view @click="classifyDel(item.id)"> <uni-icons class="btn-del" size="40" type="closeempty"></uni-icons></view>
					</view>
				</view>
				<view class="productMain" v-if="productSelect.length >0">
					<view class="productMain-title">已选商品({{productSelect.length}})</view>
					<view v-for="item in productSelect" class="flex-s-c">
                        <view>
                            <view class="text-show-line-2">{{item.FNAME}}</view>
                            <view class="desc">编码：{{item.FNUMBER}}</view>
                            <view class="desc">组织：{{item.OrgName}}</view>
                        </view>
                        <view @click="handleDel(item.FNUMBER)"> <uni-icons class="btn-del" size="40" type="closeempty"></uni-icons></view>
					</view>
				</view>
				<view @click="openZuzhiDrawer()">
				    <view class="flex-v-c">组织</view>
				    <view class="flex-main" :class="{ color3: !organization }"
				        ><text class="text-show-line-1">{{ organization ? organization : "请选择组织"
				        }}</text><uni-icons type="arrowright" style="margin-top: 6rpx;" size="24" customIcons="icon-black"></uni-icons
				    ></view>
				</view>
				<view @click="switchNo">
				    <view class="flex-v-c">显示为0的数据</view>
				    <view>
						<view class="selected-icon flex-center" v-show="dataZero==1">
							<view class="point"></view>
						</view>
						<view class="unselected-icon" v-show="dataZero==0"> </view>
					</view>
				</view>     
            </view>
			<view class="bg-white">
				<view class="query-btn" @click="chaxu()">确认查询</view>
				<view class="clear-btn" @click="clear()">清除</view>
			</view>
        </view>
		<uni-drawer ref="showRightWarehouse" mode="right" :width="320">
			<warehouse-content :warehouseSelectData="warehouseSelectData" @handleResetW="handleResetW" @handleSureW="handleSureW"/>
		</uni-drawer>
	<!-- 	<uni-drawer ref="showRightProduct" mode="right" :width="drawerWidth">
			<product-content :productSelectData="productSelect" @handleResetP="handleResetP" @handleSureP="handleSureP" />
		</uni-drawer> -->
        <uni-drawer ref="showRightProduct" mode="right" :width="100">
            <cateproduct-content :productSelectData="productSelect" @handleResetP="handleResetP" @handleSureP="handleSureP" />
        </uni-drawer>
		<uni-drawer ref="showRightZuzhi" mode="right" :width="320">
			<organization-content :organizationSelectData="organizationSelectData" @handleResetZ="handleResetZ" @handleSureZ="handleSureZ"/>
		</uni-drawer>
    </view>
</template>

<script>
import { mapMutations, mapState, mapGetters } from "vuex"
import { SubmitFromCar } from "@/service/api/order.js"
import { GetDisPersonnel } from "@/service/api/store.js"

import { AddScanBuyProductToCar } from "@/service/api/product.js"
import { GetWarehouseList, GetUserDefaultWarehouse } from "@/service/api/warehouse.js"
import { GetPostTypes } from "@/service/api/company.js"
import { deleteRefundOrderTemp, getTempCartTotal, getCarList } from "@/utils/valetCartUtil.js"
import { GetCarList } from "@/service/api/user.js"
import warehouseContent from "@/pages/stock/warehouse-content.vue"
import productContent from "@/pages/stock/product-content.vue"
import cateproductContent from "@/pages/stock/cateproduct-content.vue"
import organizationContent from "@/pages/stock/organization-content.vue"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
		warehouseContent,
		productContent,
		organizationContent,
        cateproductContent
	},
    data() {
        return {
			config: {
			    title: "库存查询",
			    centerSlot: true,
			    rightSlot: false,
			    color: ["#ffffff"],
			    statusBarFontColor: "#ffffff",
				backPage: "/pages/index/index",
			},
            mainColor: "",
			warehouse:'',
			warehouseSelect:[],
			warehouseSelectData:[],
			product:'',
			productSelect:[],
			productSelectData:[],
			organization:'',
			organizationSelect:[],
			organizationSelectData:[],
			dataZero:0,
			classifyList:[],
			regionIds:[]
        }
    },
    watch: {
        getValetCartData(e) {
            this.getTotal()
            this.$forceUpdate()
        },
    },
    computed: {
        ...mapGetters(["getValetCartData"]),
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.mainColor = mainColor
        this.config.backgroundColor = [1, mainColor]
    },
    onLoad(e) {

    },
    mounted() {
       
    },
    onShow() {
       
    },
    methods: {
		chaxu(){
			storage.setCache("returnNum",1)
			this.easyGoTo('/pages/stock/detail?dataZero='+this.dataZero+'&stockArr='+this.warehouseSelectData+'&pCodeArr='+this.productSelectData+'&organizationsArr='+this.organizationSelectData+'&GroupCodeArr='+this.regionIds)
		},
		clear(){
			this.warehouse='';
			this.warehouseSelect=[];
			this.warehouseSelectData=[];
			this.product='';
			this.productSelect=[];
			this.productSelectData=[];
			this.organization='';
			this.organizationSelect=[];
			this.organizationSelectData=[];
			this.classifyList=[];
			this.regionIds=[];
			this.dataZero=0;
		},
		openWarehouseDrawer() {
		    this.$refs.showRightWarehouse.open()
		},
		handleResetW() {
			this.warehouse = ''
			this.warehouseSelect = [];
			this.warehouseSelectData = [];
		},
		handleSureW(data,param) {
			this.warehouseSelect = data;
			this.warehouseSelectData = param;
		    this.$refs.showRightWarehouse.close()
			this.warehouse = ''
			this.warehouseSelect.forEach((item) =>{
				this.warehouse += item.StockInfoName+','
			})
			this.warehouse = this.warehouse.slice(0,this.warehouse.length-1)
		},
		openProductDrawer() {
		    this.$refs.showRightProduct.open()
		},
		handleResetP() {
			this.product = ''
			this.productSelect = [];
			this.productSelectData = [];
		},
		handleSureP(data,param) {
            if(data){
                this.productSelect = data;
                this.productSelectData = param;
                console.log(123)
                console.log(data)
                console.log(param)
                if(this.productSelectData.length > 0){
                    this.product = '去修改'
                }
            }
            this.$refs.showRightProduct.close()
		},
		openZuzhiDrawer() {
		    this.$refs.showRightZuzhi.open()
		},
		handleResetZ() {
			this.organization = ''
			this.organizationSelect = [];
			this.organizationSelectData = [];
		},
		handleSureZ(data,param) {
			this.organizationSelect = data;
			this.organizationSelectData = param;
		    this.$refs.showRightZuzhi.close()
			this.organization = ''
			this.organizationSelect.forEach((item) =>{
				this.organization += item.OrganizationsName+','
			})
			this.organization = this.organization.slice(0,this.organization.length-1)
		},
		switchNo(){
			if(this.dataZero==0){
				this.dataZero = 1 
			}else{
				this.dataZero = 0
			}
		},
        handleDel(code){
          this.productSelect = this.productSelect.filter(item => item.FNUMBER !== code)
          this.productSelectData =  this.productSelectData.filter(item => item !== code)
        },
		classifyDel(id){
			this.classifyList = this.classifyList.filter(item => item.id !== id)
			this.regionIds =  this.regionIds.filter(item => item !== id)
		},
		selectRegion() {
		    uni.navigateTo({
		        url: "/pages/select/select-classify?regionData=" + JSON.stringify(this.regionIds),
		        events: {
		            getSelectData: (data) => {
		                if (data) {
		                    console.log(data)
							this.classifyList = []
							this.regionIds = []
							this.classifyList = data.data
		                    data.data.forEach((e) => {
		                        this.regionIds.push(e.id)
		                    })
		                }
		            },
		        },
		    })
		},
    },
}
</script>

<style lang="scss">
.icon-black {
    color: $color-gray-1 !important;
}
.menu {
    display: flex;
    justify-content: flex-end;
    .menuli {
        width: 160rpx;
        height: 50rpx;
        background: rgba(219, 0, 50, 0.07);
        border-radius: 25rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 12rpx;
        text {
            font-size: 24rpx;
            color: $app-color-main;
            padding-left: 8rpx;
        }
    }
}
.consumer-top {
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    & > view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 92rpx;
        font-size: 28rpx;
        color: $color-gray-1;
		border-bottom: 1rpx solid #F0F0F0;
    }
    .sel-warehouse {
        background: #f7f7f7;
        border-radius: 8rpx;
        margin-top: 16rpx;
    }
    .flex-v-c {
        font-weight: bold;
    }
    image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 12rpx;
    }
}

.cell-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 $app-page-padding;
    height: 90rpx;

    .cell-label {
        flex: 1;
        display: flex;
        align-items: center;
    }
}

.bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120rpx;
    padding: 0 30rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
    .price-left {
        flex: 1;
        text {
            font-size: 24rpx;
            color: #333;
        }
        .proce-unit {
            font-size: $font-size-24;
            color: $app-color-main;
        }

        .price-value {
            font-size: 40rpx;
            color: $app-color-main;
            font-weight: bold;
        }
    }
    .btn {
        width: 220rpx;
        height: 80rpx;
        color: $app-color-main;
        border-radius: 45rpx;
        font-size: 32rpx;
        color: #ffffff;
    }
}
.cell-icon {
    margin-top: 4rpx;
}
.msg-input {
    display: flex;
    display: flex;
    height: 150rpx;
    background: #f7f7f7;
    border-radius: $border-radius-10;
    padding: 10rpx;
    width: calc(100% - 20rpx);
}
.remark-item {
}
.top_bg {
    height: 206rpx;
    background: $app-color-main;
    border-radius: 0px 0px 40rpx 40rpx;
}
.order-item {
    background: $color-white;
    margin-bottom: 24rpx;
    // background: red;
}

.product-item {
    padding: 32rpx $app-page-padding;
    border-radius: 16rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        // border-bottom: 1rpx solid #EBEBEB;
        margin-bottom: 24rpx;
        font-size: 28rpx;
    }

    .title-text-flex {
        justify-content: space-between;
        align-items: center;
    }

    .title-text-right {
        font-weight: normal;
    }

    .title-text-desc {
        font-size: $font-size-28;
        color: $color-gray-1;
        padding-right: 12rpx;
        font-weight: normal;
    }
    .title-text-price {
        font-weight: bold;
        color: $app-color-main;
    }
}

.product-item-line {
    .title-text {
        border-bottom: none;
        margin-bottom: 0rpx;
    }
}
.mark {
    border-left: 16rpx solid transparent;
    border-right: 16rpx solid transparent;
    border-bottom: 16rpx solid #f7f7f7;
    width: 0;
    height: 0;
    margin-left: 50rpx;
    margin-top: 10rpx;
    margin-bottom: -2rpx;
}
.order-item-main {
    display: flex;
    flex: 1;
    // margin-top: 20rpx;
    flex-direction: row;
    padding: $app-page-padding;
    background: #f7f7f7;
    border-radius: 16rpx;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            flex: 1;
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}

.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;

        text {
            margin-bottom: 4rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
.order-main {
    margin-top: -140rpx;
    padding: 0 $app-page-padding $app-page-padding;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-t-l {
            height: 98rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .order-header-button {
            width: 158rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: $app-color-main;
            font-size: $font-size-28;
        }

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }

    .order-user {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .location {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
            image {
                width: 42rpx;
                height: 40rpx;
            }
        }

        .user-info {
            display: flex;
            flex: 1;
            display: flex;
            flex-direction: column;

            text {
                color: $app-color-main;
            }

            .user-info-name {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: $font-size-32;
                color: $color-gray-1;
                font-weight: 700;
                margin-bottom: 12rpx;
                image {
                    width: 42rpx;
                    height: 40rpx;
                    margin-right: 8rpx;
                }
            }

            .user-info-location {
                font-size: $font-size-24;
                line-height: 32rpx;
                color: $color-gray-2;
            }
        }
    }

    .order-items {
        padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;

        .order-info-item {
            padding: 14rpx 0;
            display: flex;
            flex-direction: row;

            text {
                font-size: $font-size-24;
            }

            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
            }

            .value {
                color: $app-color-main;
            }

            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }
}

.order-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $color-white;
    box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 $app-page-padding;

    .btn {
        height: 64rpx;
        margin-left: 20rpx;
        padding: 0 40rpx;
    }
}

.logistics {
    height: 88rpx;
    border-top: 1rpx solid #ebebeb;
    display: flex;
    padding: 0 $app-item-padding;
    justify-content: space-between;
    align-items: center;

    .logistics-title {
        font-size: $font-size-28;
        font-weight: bold;
    }

    .logistics-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .logistics-desc {
        padding-right: 12rpx;
    }
}

.remark {
    background: #f7f7f7;

    .remark-main {
        border-bottom: 1rpx solid #ebebeb;

        .remark-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: $color-gray-1;
            padding: 24rpx 24rpx 20rpx 24rpx;

            view {
                font-size: $font-size-28;
            }

            text {
                font-size: $font-size-24;
                color: $color-gray-3;
            }
        }

        .remark-desc {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding: 0rpx 24rpx 20rpx 24rpx;
            word-break: break-all;
        }
    }

    & .remark-main:last-child {
        border: none;
    }
}
.remarkmenu {
    display: flex;
    padding: 24rpx;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;
    border: 1rpx solid #f7f7f7;
    border-top: none;
    text {
        color: $color-gray-3;
    }
}
.pop-return-box {
    background: $color-white;
    border-radius: $border-radius-10;
    padding: $app-page-padding;
    width: 600rpx;

    textarea {
        max-height: 350rpx;
        background: #f7f7f7;
        border-radius: 8rpx;
        border: 1rpx solid #979797;
        padding: 10rpx 0;
        text-indent: 10rpx;
        margin: 24rpx 0;
        width: 598rpx;
    }

    .pop-return-title {
        display: flex;
        justify-content: center;

        text {
            font-weight: 700;
            font-size: 34rpx;
        }
    }

    .pop-action {
        border-top: 1rpx solid rgba(0, 0, 0, 0.1);
        margin: 0 -24rpx -24rpx -24rpx;
        height: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        view {
            width: 50%;
            text-align: center;
            height: 110rpx;
            line-height: 110rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: $app-color-main;
        }

        & > view:first-child {
            color: $color-gray-1;
            border-right: 1rpx solid rgba(0, 0, 0, 0.1);
        }
    }

    .return-msg {
        margin-bottom: 20rpx;

        .card-group-cell {
            margin-left: 0 !important;
        }
    }

    .img-title {
        display: flex;
        color: $app-color-text-tip;
        margin-bottom: 20rpx;
    }

    .action {
        display: flex;
        flex-direction: row;

        .btn {
            flex: 1;
            border-radius: $border-radius-10;
            height: 70rpx;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

.pop-pro-list {
    background: #f1f1f1;
    border-radius: 24rpx 24rpx 0 0;

    .pop-header {
        padding-top: 52rpx;
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: calc(100vh - 100rpx);
    }
}

.ptb0 {
    padding-bottom: 0 !important;
}
.order-submit-list {
    background-color: $color-white;
    border-radius: $border-radius-10;
    .policy-price-box {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        .label-text {
            flex: 1;
        }
    }
    .policy-after-price {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        justify-content: flex-end;
    }
}

.pop-pro-list {
    background: #f1f1f1;
    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;
        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }
        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }
    .scroll {
        height: calc(100vh - 100rpx);
    }
}
.popupright {
    .icon-close {
        right: auto !important;
        left: 24rpx;
        color: $color-gray-3;
    }
}
.coupon-item {
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;
    .coupon-item-main {
        display: flex;
        flex-direction: row;
        align-items: center;
        .icon-coupon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }
        .icon-coupon-name {
            flex: 1;
        }
        .no-use-coupon {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }
        .use-coupon {
            color: $color-orange-1;
            font-size: $font-size-24;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 60%;
        }
        .icon-right {
            margin-left: 8rpx;
        }
    }
    .coupon-item-desc {
        text {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }
    }
}
.color3 {
    color: $color-gray-3 !important;
}
.pay-way-scroll {
    max-height: 50vh;
}
.pay-way-item {
    justify-content: center;
    border-color: #f2f2f2 !important;
    text {
        font-size: 28rpx;
    }
}

.unselected-icon,
.selected-icon {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
}

.unselected-icon {
	border: 2rpx solid $uni-border-color;
}

.selected-icon {
	border: 1rpx solid $app-color-main;

	.point {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: $app-color-main;
	}
}
.bg-white{
	background: #ffffff;
	padding: 28rpx 0 32rpx 0;
	text-align: center;
}
.query-btn{
	width: 638rpx;
	height: 88rpx;
	background: $app-color-main;
	border-radius: 44rpx;
	font-size: 32rpx;
	color: #FFFFFF;
	margin:0rpx auto 32rpx auto;
	line-height: 88rpx;
}
.clear-btn{
	color: #999;
	font-size: 28rpx;
}
.flex-main{
	flex: 1;
	display: flex;
	justify-content: flex-end;
	.text-show-line-1{
		width: 75%;
		text-align: right;
	}
}
.productMain{
	display: block!important;
	height: auto!important;
	background: #F7F7F7;
	padding: 24rpx 16rpx 0rpx 16rpx;
	&>view{
		margin-bottom: 24rpx;
	}
	.text-show-line-2{
		color: #333333;
		font-weight: 700;
		font-size: 28rpx;
		margin-bottom: 12rpx;
	}
	.desc{
		font-size: 24rpx;
		color: #999;
	}
}
.productMain-title{
	color: $app-color-main;
	font-size: 28rpx;
	font-weight: bold;
}
</style>
